import React, { useEffect, useState } from 'react';
import styles from './index.module.scss';
import StudyStyleTitleImg from '../../../assets/result-page-img/study-style';
import StudyStyleUsImg from '../../../assets/result-page-img/study-style/stydu-style-us';
import classes from 'classnames';

const StudyStyleTitle = ({ type, size, isShow, children, multi }) => {
  const [style, setStyle] = useState('studyStyleTitle_');
  useEffect(() => {
    if (multi) {
      setStyle('studyStyleTitle_multi_');
    }
  }, []);

  return (
    <div>
      <div className={classes(styles[style + size])}>
        <img src={StudyStyleTitleImg[type]} alt="" className={styles[size]} />
        <div className={styles.number}>{children}</div>
      </div>
      {isShow ? (
        <img src={StudyStyleUsImg[type]} alt="" className={styles.other} />
      ) : (
        ''
      )}
    </div>
  );
};

export default StudyStyleTitle;
